<template>
	<common-card class="portal_book_lending">
		<a-space :size="16">
			<dl>
				<dt style="color: green">6</dt>
				<dd>正在借阅</dd>
			</dl>
			<dl>
				<dt style="color: red">9</dt>
				<dd>已逾期</dd>
			</dl>
			<dl>
				<dt style="color: orange">0</dt>
				<dd>即将到期</dd>
			</dl>
		</a-space>
		<a-table v-bind="tableConfig" :data="tableListData">
			<template #status="{ record }">
				<a-tag color="red" v-if="record.status === 0">【已逾期】</a-tag>
				<a-tag color="green" v-if="record.status === 1">【借阅中】</a-tag>
			</template>
		</a-table>
		<a-pagination size="small" :total="tableData.length" v-model:current="pageCurrent" v-model:pageSize="pageSize" />
	</common-card>
</template>

<script lang="ts" setup>
import commonCard from '../commonCard.vue';
defineOptions({ name: 'BookLending' });
interface TableProp {
	name: string;
	lendingDate: Date;
	overdueDate: Date;
	status?: number;
}
const pageSize = ref(7);
const pageCurrent = ref(1);
const tableConfig = ref({
	bordered: false,
	pagination: false,
	pagePosition: 'bottom',
	scroll: { maxHeight: 245 },
	columns: [
		{ title: '图书名称', dataIndex: 'name' },
		{ title: '借阅日期', dataIndex: 'lendingDate', width: 120 },
		{ title: '逾期日期', dataIndex: 'overdueDate', width: 120 },
		{ title: '状态', slotName: 'status', width: 100, align: 'center' }
	]
});
const tableData = reactive<TableProp[]>([
	{ name: '《稻盛和夫的人生哲学》', lendingDate: '2022-06-10', overdueDate: '2025-11-06', status: 1 },
	{ name: '《稻盛和夫的人生哲学》', lendingDate: '2022-06-10', overdueDate: '2025-11-06', status: 0 },
	{ name: '《稻盛和夫的人生哲学》', lendingDate: '2022-06-10', overdueDate: '2025-11-06', status: 1 },
	{ name: '《稻盛和夫的人生哲学》', lendingDate: '2022-06-10', overdueDate: '2025-11-06', status: 1 },
	{ name: '《稻盛和夫的人生哲学》', lendingDate: '2022-06-10', overdueDate: '2025-11-06', status: 1 },
	{ name: '《稻盛和夫的人生哲学》', lendingDate: '2022-06-10', overdueDate: '2025-11-06', status: 0 },
	{ name: '《稻盛和夫的人生哲学》', lendingDate: '2022-06-10', overdueDate: '2025-11-06', status: 1 },
	{ name: '《稻盛和夫的人生哲学》', lendingDate: '2022-06-10', overdueDate: '2025-11-06', status: 0 },
	{ name: '《稻盛和夫的人生哲学》', lendingDate: '2022-06-10', overdueDate: '2025-11-06', status: 0 },
	{ name: '《稻盛和夫的人生哲学》', lendingDate: '2022-06-10', overdueDate: '2025-11-06', status: 0 },
	{ name: '《稻盛和夫的人生哲学》', lendingDate: '2022-06-10', overdueDate: '2025-11-06', status: 1 }
]);
const tableListData = computed(() => {
	let page = pageCurrent.value;
	let limit = pageSize.value;
	return tableData.slice((page - 1) * limit, page * limit);
});
</script>

<style lang="scss" scoped>
.portal_book_lending {
	&:deep(.arco-card-body) {
		flex-direction: column;
	}
	&:deep(.arco-space) {
		height: 58px;
		padding: 16px;
		flex-shrink: 0;
		border-bottom: solid 1px var(--color-border-3);
		.arco-space-item {
			flex: 1;
			height: 100%;
			overflow: hidden;
		}
		dl {
			display: flex;
			align-items: center;
			box-sizing: border-box;
			border: solid 1px var(--color-border-3);
			border-radius: 4px;
			overflow: hidden;
			height: 100%;
			flex: 1;
		}
		dt {
			display: flex;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;
			font-size: 28px;
			min-width: 72px;
			font-weight: 600;
			padding: 0 16px;
			height: 100%;
			flex-shrink: 0;
			background-color: var(--color-bg-4);
			border-right: solid 1px var(--color-border-3);
		}
		dd {
			flex: 1;
			text-align: center;
			line-height: 1;
		}
	}
	.arco-table {
		flex: 1;
		min-height: 245px;
		overflow: hidden;
		.arco-tag {
			padding: 0;
			height: auto;
			line-height: 1;
			font-size: 14px;
			background-color: transparent;
		}
	}
	.arco-pagination {
		padding: 12px;
		justify-content: center;
	}
}
</style>
